<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">发请求1</button>
    <button id="btn2">发请求2</button>

    <script src="./node_modules/axios/dist/axios.js"></script>
    <script>
        // // 请求拦截
        // axios.interceptors.request.use(config => {
        //     // config是本次的请求信息
        //     console.log('发请求调用', config)
        //     // 这里return什么，那么就相当于发出去什么请求
        //     // 如果不return就代表请求没有发出去
        //     // config.url = 'http://hmajax.itheima.net/api/news'
        //     return config
        // }, err => {

        //     // 请求失败调用
        //     return Promise.reject(err)
        // })

        // 响应拦截
        axios.interceptors.response.use(response => {
            console.log('响应成功调用', response)
            // return response

            // 数据剥离，把data剥离出来，外面用的时候就可以少写一个data
            return response.data

        }, err => {
            console.log('响应出错拦截', err)
            // 响应失败调用 Promise.reject就是抛出错误
            // return Promise.reject(err)
            // 只要我不抛出错误，那是进到.then里
            // console.log(age) // 进到catch
            return '抠你鸡娃'
        })



        document.querySelector('#btn1').onclick = function () {
            axios({
                url: 'http://hmajax.itheima.net/api/province4343',
                xx: 'oo'
            })
            .then ( res => {
                console.log('拿到数据', res)
            })
            .catch (err => {
                console.log('catch里', err)
            })
        }

        document.querySelector('#btn2').onclick = function () {
            axios({
                url: 'http://hmajax.itheima.net/api/news'
            })
            .then(res => {
                console.log('拿到数据2', res)
            })
        }
    </script>
</body>
</html>